<template>
  <div class="layout">
    <el-menu class="sidebar" @select="handleSelect">
      <el-menu-item
        v-for="item in menuList"
        :key="item.id"
        :index="`${item.id}`"
      >
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      menuList: [
        {
          id: 1,
          title: '摄像头基础操作',
          path: '/basis'
        },
        {
          id: 2,
          title: '屏幕分享',
          path: '/screen-capture'
        },
        {
          id: 3,
          title: '一对一视频通话',
          path: '/private-video-chat'
        },
        {
          id: 4,
          title: '一对多直播',
          path: '/live-broadcast'
        }
        // {
        //   id: 3,
        //   title: '虚拟背景',
        //   description: '虚拟背景例子',
        //   path: '/virtualbg'
        // },
        // {
        //   id: 5,
        //   title: '小型直播',
        //   description: '纯WebRTC小型直播、可切换虚拟背景',
        //   path: '/demo03-one2many'
        // },
        // {
        //   id: 6,
        //   title: '多对多网络视频',
        //   description: 'Mesh架构会议系统',
        //   path: '/demo03-many2many'
        // },
        // {
        //   id: 7,
        //   title: 'Janus-01',
        //   description: 'Janus初步认识，初始化，插件使用；点对点音视频；媒体控制',
        //   path: '/demo04-janus-01'
        // },
        // {
        //   id: 8,
        //   title: 'Janus-02',
        //   description: 'Janus会议室',
        //   path: '/demo04-janus-02'
        // },
        // {
        //   id: 9,
        //   title: 'FLV播放器',
        //   description: 'FLV播放器',
        //   path: '/flv-player'
        // },
        // {
        //   id: 10,
        //   title: 'WebRTC+SRS推流',
        //   description: '使用WebRTC给SRS流媒体服务推流',
        //   path: '/srs-rtc-push'
        // },
        // {
        //   id: 11,
        //   title: 'WebRTC+SRS直播',
        //   description: 'WebRTC+SRS实现低延迟直播',
        //   path: '/srs-live-room'
        // },
        // {
        //   id: 12,
        //   title: 'WebRTC+SRS会议系统',
        //   description: 'WebRTC+SRS实现多媒体混合会议',
        //   path: '/srs-meeting-room'
        // },
        // {
        //   id: 13,
        //   title: '前端媒体流合并',
        //   description: '前端媒体画面合并',
        //   path: '/stream-merger-push'
        // }
      ]
    }
  },
  methods: {
    handleSelect (index) {
      const target = this.menuList.find(item => item.id === Number(index))
      this.$router.push(target.path)
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  overflow: hidden;
  height: 100%;

  .sidebar {
    overflow: auto;
    width: 200px;
    height: 100%;
  }

  .main {
    flex: 1;
    overflow: hidden;
    height: 100%;
    padding: 10px;
  }
}
</style>
